<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">角色管理</h3>
                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input class="form-control pull-right" id="searchNameId" name="table_search"
                               placeholder="角色名" type="text">

                        <div class="input-group-btn">
                            <button class="btn btn-default btn-search" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                            <button class="btn btn-default btn-add" type="button">添加</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <form>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>角色名称</th>
                            <th>备注</th>
                            <th>创建时间</th>
                            <th>修改时间</th>
                            <th>创建用户</th>
                            <th>修改用户</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbodyId">
                        </tbody>
                    </table>
                </form>
            </div>
            <!-- /.box-body -->
            <div class="box-footer clearfix" id="pageId">
            </div>
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#pageId").load("doPageUI", function () {
            doGetObjects();
        });
        $(".input-group-btn")
            .on("click", ".btn-search", doQueryObjects)
            .on("click", ".btn-add", doLoadEditUI)
        $("#tbodyId")
            .on("click", ".btn-delete", doDeleteObject)
            .on("click", ".btn-update", doLoadEditUI)
    });

    function doLoadEditUI() {
        var title;
        if ($(this).hasClass('btn-add')) {
            title = "添加角色";
            doLoadPageUI(title);
        } else {
            title = "修改角色"
            var id = $(this).parents("tr").data("id");
            var params = {"id": id};
            var url = "role/doFindObjectById";
            $.getJSON(url, params, function (result) {
                if (result.state == 1) {
                    result.data.id = id;//在结果中动态追加id
                    $("#mainContentId").data("data", result.data);
                    doLoadPageUI(title);//异步加载页面
                } else {
                    alert(result.message);
                }
            });
        }
    }

    function doLoadPageUI(title) {
        var url = "role/role_edit"
        $("#mainContentId")
            .load(url, function () {
                $(".box-title").html(title);
            })
    }

    function doDeleteObject() {
        //1.params
        var id = $(this).parents("tr").data("id");
        var params = {"id": id};
        //2.url
        var url = "role/doDeleteObject"
        //3.ajax request
        $.post(url, params, function (result) {
            if (result.state == 1) {
                alert(result.message);
                doGetObjects();
            } else {
                alert(result.message);
            }
        })

    }

    function doQueryObjects() {
        $("#pageId").data("pageCurrent", 1);
        doGetObjects();
    }

    function doGetObjects() {
        debugger
        //1.params
        //获取在Page.html中绑定的当前页码值
        var pageCurrent = $("#pageId").data("pageCurrent");
        //假如没有值,设置初始值为1
        if (!pageCurrent) pageCurrent = 1;
        //var params="pageCurrrent="+pageCurrent;
        var params = {"pageCurrent": pageCurrent};
        //获取查询时用户输入的名字
        var name = $("#searchNameId").val();
        if (name) params.name = name;
        //2.url
        var url = "role/doFindPageObjects";
        //3.ajax request
        console.log(params);
        $.getJSON(url, params, function (result) {
            doHandleResponseResult(result);
        });
    }

    function doHandleResponseResult(result) {

        if (result.state == 1) {
            doSetTableBodyRows(result.data.records);
            doSetPagination(result.data);//page.html
        } else {
            doSetTableBodyErrors(result.message);
        }
    }

    function doSetTableBodyErrors(message) {
        //获取body对象并清空
        var tBody = $("#tbodyId");
        tBody.empty();
        //创建tr对象
        var tr = $("<tr></tr>");
        //创建td对象
        //var len=$("table thead").find("tr").find("th").length;
        var len = $("table th").length;
        var td = $("<td></td>");
        td.prop("colspan", len);
        td.append(message);
        tr.append(td);
        //将tr追加到tbody
        tBody.append(tr);
    }

    function doSetTableBodyRows(records) {

        //获取tbody对象,并清空
        var tBody = $("#tbodyId");
        tBody.empty();
        //2.迭代数据,并追加到tBody
        for (var i in records) {
            //2.1构建tr对象
            var tr = $("<tr></tr>");
            tr.data("id", records[i].id);
            //2.2构建tds对象
            var tds = doCreateTds(records[i], i);
            //2.3将tds对象追加到tr中
            tr.append(tds);
            //2.4将tr追加到tbody中
            tBody.append(tr);
        }
    }

    function doCreateTds(row, i) {
        var tds =
            "<td>" + (parseInt(i) + 1) + "</td>" +
            "<td>" + row.name + "</td>" +
            "<td>" + row.note + "</td>" +
            "<td>" + new Date(row.createdTime).toLocaleString() + "</td>" +
            "<td>" + new Date(row.modifiedTime).toLocaleString() + "</td>" +
            "<td>" + row.createdUser + "</td>" +
            "<td>" + row.modifiedUser + "</td>" +
            "<td><a class='btn-delete'>delete</a>" +
            "&nbsp;<a class='btn-update'>update</a></td>";
        return tds;
    }
</script>
